<template>
  <div class="app-container">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-row>
          <el-input v-model="listQuery.user_id" class="marginRB10" clearable placeholder="用户ID" style="width:200px;"
          ></el-input>
          <el-input v-model="listQuery.order_no" class="marginRB10" clearable placeholder="订单编号" style="width:200px;"
          ></el-input>
          <el-input v-model="listQuery.anchor_code" class="marginRB10" clearable placeholder="达人ID搜索"
                    style="width:200px;"
          ></el-input>
          <el-select v-model="listQuery.game_id" clearable placeholder="订单类型">
            <el-option
              v-for="item in options1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="listQuery.audit_status" clearable placeholder="审核状态">
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select v-model="listQuery.status" clearable placeholder="审核结果">
            <el-option
              v-for="item in options3"
              :key="item.id"
              :label="item.label"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-button class="marginRB10" el-button icon="el-icon-search" type="primary" @click="searchList">搜索
          </el-button>
          <el-button class="marginRB10" el-button icon="el-icon-search" type="primary" @click="resetList">重置</el-button>

        </el-row>
      </div>
      <div class="item">
        <el-table ref="dataList" v-loading="listLoading" :data="menuList"
                  :tree-props="{children: 'children', hasChildren: 'hasChildren'}" border
                  style="margin-bottom: 20px;"
        >
          <el-table-column label="序号" prop="id" width="80"></el-table-column>
          <el-table-column label="订单编号" prop="order_no"></el-table-column>
          <el-table-column label="下单用户ID" prop="user_id"></el-table-column>
          <el-table-column label="游戏达人用户ID" prop="anchor_id"></el-table-column>
          <el-table-column label="订单类型" prop="game_name">
            <template slot-scope="{row}">
              <el-tag type="primary">{{ row.game_name }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="费用单价" prop="price">
            <template slot-scope="{row}">
              {{ row.price + '/' + row.unit }}
            </template>
          </el-table-column>
          <el-table-column label="数量" prop="count"></el-table-column>
          <el-table-column label="支付金额（金豆）" prop="total_price"></el-table-column>
          <el-table-column label="退款原因（下单用户）" prop="refund_description"></el-table-column>
          <el-table-column label="退款凭证（下单用户）" prop="refund_picture">
            <template slot-scope="{row}">
              <el-image
                v-for="(item, index) in row.refund_picture" :key="index"
                :preview-src-list="row.refund_picture"
                :src="item"
                style="width: 100px; height: 100px;padding: 5px;"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="拒绝退款原因（达人）" prop="anchor_reason"></el-table-column>
          <el-table-column label="拒绝凭证（达人）" prop="anchor_picture">
            <template v-if="row.anchor_picture.length" slot-scope="{row}">
              <el-image
                v-for="(item, index) in row.anchor_picture" :key="index"
                :preview-src-list="row.anchor_picture"
                :src="item"
                style="width: 100px; height: 100px;padding: 5px;"
              >
              </el-image>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" prop="audit_status">
            <template slot-scope="{row}">
              <el-tag :type="row.audit_status === 1 ? 'primary' : 'success'">{{
                  row.audit_status === 1 ? '待审核' : '已审核'
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审核结果" prop="order_status">
            <template slot-scope="{row}">
              <el-tag>
                {{ row.status_name }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="审核原因" prop="audit_reason"></el-table-column>
          <el-table-column label="审核时间" prop="audited_at"></el-table-column>
          <el-table-column label="操作" prop="date" width="200">
            <template slot-scope="scope">
              <el-button
                icon="el-icon-edit"
                plain
                size="small"
                type="primary"
                @click="handleDialogShow(scope.row)"
              >详情
              </el-button>
              <el-button
                v-if="scope.row.audit_status === 1"
                icon="el-icon-edit"
                plain
                size="small"
                type="primary"
                @click="handleBan(scope.row)"
              >审核
              </el-button>
            </template>
          </el-table-column>

        </el-table>
        <!-- 分页 -->
        <cus-pagination
          v-show="total > 0"
          :limit.sync="listQuery.perPage"
          :page.sync="listQuery.page"
          :total="total"
          @pagination="getList"
        />
      </div>
    </el-card>
    <el-dialog
      :visible.sync="visible"
      title="查看"
      width="30%"
      @close="form = {}"
    >
      <el-form ref="form" :inline="false" :model="form" :rules="rules" label-width="150px" size="normal">
        <el-form-item label="订单编号：" prop="">
          <p>{{ form.order_no }}</p>
        </el-form-item>
        <el-form-item label="下单用户：" prop="">
          <p><span class="text">用户ID：{{ form.user_id }}</span><span>用户昵称：{{ form.user_nickname }}</span></p>
        </el-form-item>
        <el-form-item label="游戏达人用户：" prop="">
          <p><span class="text">用户ID：{{ form.anchor_id }}</span><span>用户昵称：{{ form.anchor_nickname }}</span></p>
        </el-form-item>
        <el-form-item label="订单类型：" prop="">
          {{ form.game_name }}
        </el-form-item>
        <el-form-item label="费用单价：" prop="">
          <p>{{ form.price }}金豆 / 局</p>
        </el-form-item>
        <el-form-item label="数量：" prop="">
          <p>{{ form.count }}</p>
        </el-form-item>
        <el-form-item label="支付金额：" prop="">
          <p>{{ form.total_price }}</p>
        </el-form-item>
        <el-form-item label="订单状态：" prop="">
          <p>{{ form.order_status_name }}</p>
        </el-form-item>
        <el-form-item label="订单评价：" prop="">
          <el-rate v-model="form.grade" :max="10" disabled show-text></el-rate>
          <div class="tagBox">
            <div v-for="(item, index) in form.comment_label" :key="index">
              <el-tag effect="dark" size="normal" type="success">{{ item }}</el-tag>
            </div>
          </div>
          <p>{{ form.comment }}</p>

        </el-form-item>
        <el-form-item label="下单时间：" prop="">
          <p>{{ form.created_at }}</p>
        </el-form-item>
        <el-form-item label="付款时间：" prop="">
          <p>{{ form.created_at }}</p>
        </el-form-item>
        <el-form-item label="接单时间：" prop="">
          <p>{{ form.service_time }}</p>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 封禁账号 -->
    <el-dialog
      :visible.sync="banIpDialogVisible"
      title="审核"
      width="30%"
      @close="handleDialogClose('banReasonForm')"
    >
      <el-form ref="banReasonForm" :model="banReasonForm" :rules="banReasonFormRules" class="demo-ruleForm"
               label-width="120px"
      >
        <el-form-item label="审核结果" prop="status">
          <el-radio-group v-model="banReasonForm.status">
            <el-radio :label="1">同意退款</el-radio>
            <el-radio :label="2">拒绝退款</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="审核原因" prop="reason">
          <el-input v-model="banReasonForm.reason" placeholder="请输入审核原因" type="text"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="banIpDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="confirmBanIp('banReasonForm')"
          >提 交
          </el-button
          >
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 审核 -->
    <el-dialog
      :visible.sync="deleteDialogVisible"
      title="撤销审核"
      width="435px"
    >
      <span style=""><em style="font-style: normal; color: red">确定撤销审核吗？</em></span>
      <span slot="footer" class="dialog-footer">
                <el-button @click="deleteDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleConfirmDel">确 定</el-button>
            </span>
    </el-dialog>

  </div>
</template>

<script>
import { accompanyList, accompanyRefund, refundAudit } from '@/api/playManagement'

export default {
  data() {
    return {
      form: {},
      visible: false,
      banReasonForm: {
        status: undefined,
        reason: undefined
      },
      banReasonFormRules: {
        status: [{ required: true, message: '请选择', trigger: 'blur' }],
        reason: [{ required: true, message: '请输入审核原因', trigger: 'blur' }]
      },
      banIpDialogVisible: false,
      deleteDialogVisible: false,
      options1: [],
      options2: [
        {
          id: 0,
          label: '全部'
        },
        {
          id: 1,
          label: '待审核'
        },
        {
          id: 2,
          label: '已审核'
        }
      ],
      options3: [
        {
          id: 0,
          label: '全部'
        },
        {
          id: 1,
          label: '同意退款'
        },
        {
          id: 2,
          label: '拒绝退款'
        }
      ],
      listLoading: true,
      total: 0,
      listQuery: {
        page: 1,
        perPage: 10,
        anchor_code: undefined,
        user_id: undefined,
        game_id: undefined,
        order_no: undefined, //订单编号
        audit_status: undefined, //审核状态 1待审核 2已审核
        status: undefined //审核结果 1同意退款 2拒绝退款
      },
      menuList: [],
      dialogFormVisible: false,
      dialogStatus: '',
      titleMap: {
        update: '编辑',
        create: '增加'
      },
      form: {
        id: undefined,
        name: undefined
      },
      rules: {
        name: [{ required: true, message: '请输入名字', trigger: 'blur' }]
      },
      rowId: ''
    }
  },
  created() {
    this.getAccompanyList()
    this.getList()
  },
  methods: {
    async getAccompanyList() {
      const { data } = await accompanyList({
        page: 1,
        perPage: 9999
      })
      this.options1 = data.data
      console.log(data)
    },
    getList() {
      this.listLoading = true
      for (let key in this.listQuery) {
        this.listQuery[key] =
          this.listQuery[key] === '' ? undefined : this.listQuery[key]
      }
      accompanyRefund(this.listQuery).then(({ data: { data, total } }) => {
        this.menuList = data
        this.total = total
        this.listLoading = false
      })
    },
    searchList() {
      this.listQuery.page = 1
      this.getList()
    },
    resetList() {
      this.listQuery = {
        page: 1,
        perPage: 10,
        anchor_code: undefined,
        user_id: undefined,
        game_id: undefined,
        order_no: undefined, //订单编号
        audit_status: undefined, //审核状态 1待审核 2已审核
        status: undefined //审核结果 1同意退款 2拒绝退款
      }
      this.getList()
    },
    handleDialogShow(row) {
      this.form = row
      this.visible = true
    },

    handleBan(row) {
      this.rowId = row.id
      this.banIpDialogVisible = true
    },
    handleConfirmDel() {
    },
    confirmBanIp() {
      this.$refs['banReasonForm'].validate(async valid => {
        if (valid) {
          this.banReasonForm.id = this.rowId
          this.postRefundAudit(this.banReasonForm)
        }
      })
    },
    postRefundAudit(data) {
      refundAudit(data).then(res => {
        if (res.code === 200) {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.banIpDialogVisible = false
          this.getList()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
[v-cloak] {
  display : none;
}

.clearfix:before,
.clearfix:after {
  display : table;
  content : "";
}

.clearfix:after {
  clear : both
}

.box-card {
  width : 100%;
}

.demo-form-inline {
  float : right;
}

::v-deep {
  .el-card__header {
    padding-bottom : 0;
  }

  .tagBox {
    display   : flex;
    flex-wrap : wrap;

    div {
      margin-right : 10px;
    }
  }

  .el-form {
    border : 1px solid #ddd;
  }

  .el-form-item {
    padding-bottom : 22px;
    border-bottom  : 1px solid #ddd;
  }

  .el-form-item:nth-child(1) {
    padding-top : 22px;
  }

  .el-form-item:last-child {
    border-bottom : none;
  }
}

.text {
  padding-right : 25px;
}
</style>
